<template>
	<view class="content">
		<!-- header -->
		<view class="header">
		</view>
		<!-- main -->
		<view class="main">
			<image :src="imgUrl" mode=""></image>
		</view>
		<!-- reg / login -->
		<view class="reginput">
			<!-- 账号输入框 -->
			<view class="userName">
				<text>账号</text>
				<uni-easyinput class="uni-mt-5" suffixIcon="help"
				 clearable v-model="value" @input="checkNum()"
				placeholder="手机号 / 证件号" @iconClick="iconClick">
				</uni-easyinput>
			</view>
			<!-- pwd输入框 -->
			<view class="psw">
				<text>密码</text>
				<uni-easyinput class="uni-mt-5" type="password" suffixIcon="help" v-model="password" 
				placeholder="请输入密码" @iconClick="iconClick">
				</uni-easyinput>
			</view>
			<silder ref="slideCode" @success="verifySuccess" :reset="false"></silder>
			<!-- Others -->
			<view class="Others">
				<text>扫脸登录</text>
				<text style="font-size: 12px;font-weight: 800;color: deepskyblue;margin: 0 4px 0 4px;">|</text>
				<text>找回密码</text>
			</view>
			<!-- 登录按钮 -->
			<view class="btn">
					<button class="button" type="primary" @click="Login"><text
					class="button-text">登录</text></button>
				<view>
					<!-- 输入框示例 -->
			
				</view>
			</view>
					<!-- register -->
			<view class="btn">
				<button class="button"  @click="inputDialogToggle"><text
				class="button-text">注册</text></button>

			</view>
		</view>
	</view>
</template>

<script>
	import silder from '@/compopents/slide/slide.vue'
	export default {
		components:{
			silder
		},
		data() {
			return {
				// 表单验证

				imgUrl:'/static/tabBarLogo/MinePersonal.png',
				value: '',
				password: '',
				placeholderStyle: "color:#2979FF;font-size:14px",
				styles: {
					color: '#2979FF',
					borderColor: '#2979FF'
				},
			};
		},
		created() {
	
		},
		 mounted(){
		        
		        },
		
		methods:{
			// 按钮
			Login(){
				console.log(123);
			},
			
			checkNum(){
				console.log(this.value);
			},
				
						// 数据存储
						// uni.setStorage({
						// 	key: 'storage_key',
						// 	data: 'hello',
						// 	success: function () {
						// 		console.log('success');
						// 	}
						// });
						// 关闭窗口后，恢复默认内容
						// this.$refs.inputDialog.close()
					
					// uni.reLaunch({
					// 	// url:'/pages/tabBar/Mine?username=' + val
					// })
				
				shareToggle() {
					this.$refs.share.open()
				},

				// uni.reLaunch({
				// 	url:"/pages/tabBar/Mine?username='admin'"
				// })
				// showToast() {
				// 		this.$refs.uToast.show({
				// 			title: '登录成功',
				// 			type: 'success',
				// 			url: '/pages/user/index'
				// 		})
				
			},
			//滑块验证码结束后事件
			verifySuccess(){
				uni.showModal({
					title:'通知',
					content:'验证成功'
				})
				// console.log('验证成功')
				},

	}
</script>

<style lang="scss">
.content{
padding: 0px 17px 26px;
}
	.main{
		height: 360rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}
	}
	.reginput{
		width: 100%;
		display: flex;
		flex-direction: column;
		.userName{
			width: 100%;
			font-size: 14px;
			font-weight: 400;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;
		}
		.psw{
			width: 100%;
			font-size: 14px;
			font-weight: 400;
			display: flex;
			align-items: center;
		}
		.Others{
			display: flex;
			font-size: 12px;
			display: flex;
			justify-content: right;
		}
		.btn{
			margin-top: 20px;
		}
	}
	$nav-height: 30px;
	/deep/.is-input-border[data-v-20076044]{
		border: none;
	}
	/deep/.content-clear-icon[data-v-20076044]{
		padding: 0 20px;
	}
	/deep/.uni-easyinput__content-input{
		padding-left: 20px !important;
	}

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}
	/deep/.uni-navbar--border[data-v-4e85c420]{
		border-bottom-style:none !important;
	}
	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 18px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
</style>
